<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆年检</span>
    <el-button @click="updeteForm()" type="primary" style="float:right;margin-top:13px;">录入年检车辆</el-button>
  </div>
  <el-card style="margin:20px;height: 70px;">
    <!--    车辆搜索卡片-->
    <el-form :inline="true">
      <el-form-item label="车牌号">
        <el-input placeholder="请输入送检车辆车牌号" style="width:220px;" v-model="searchVehicleForm.license"></el-input>
      </el-form-item>
      <el-form-item label="送检人员" style="width:290px;">
        <el-input placeholder="请输入送检人员姓名" style="width:220px;"
                  v-model="searchVehicleForm.username" ></el-input>
      </el-form-item>
      <el-form-item label="年检状态" style="width:290px;">
        <el-select placeholder="请输入年检状态" style="width:220px;" v-model="searchVehicleForm.status">
          <el-option label="送检中" value="1"></el-option>
          <el-option label="已完成" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch()">重置</el-button>
        <el-button type="primary" @click="loadVehicle()">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!--  车辆年检列表-->
  <el-card style="margin:20px;">
    <el-table :data="vehicleArr">
      <el-table-column type="index" label="编号" width="80" align="center" />
      <el-table-column prop="license" label="年检车辆" align="center" />
      <el-table-column prop="item" label="年检项目" align="center" :formatter="itemTypeFormatter"/>
      <el-table-column prop="username" label="送检人员" align="center"/>
      <el-table-column prop="addr" label="送检地点" align="center" :formatter="addrFormatter"/>
      <el-table-column prop="inspectionTime" label="年检时间" align="center"/>
      <el-table-column prop="expireDate" label="年检到期时间" align="center"/>
      <el-table-column prop="fee" label="年检费用" align="center"/>
      <el-table-column prop="status" label="年检状态" align="center" :formatter="vehicleStatusTypeFormatter"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editVehicle(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="delVehicle(scope.row.id,index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!--  新增车辆弹窗-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="送检人">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检查车辆">
            <el-select placeholder="请选择" v-model="saveVehicleForm.vehicleId" >
              <el-option  v-for="ws in vehicle" :label= ws.license :value= ws.id></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="年检项目">
            <el-select placeholder="请选择" v-model="saveVehicleForm.item">
              <el-option label="- 违章检查" value="30"></el-option>
              <el-option label="- 上线检测" value="31"></el-option>
              <el-option label="- 尾气检测" value="32"></el-option>
              <el-option label="- 外观检测" value="33"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年检地点">
            <el-select placeholder="请选择" v-model="saveVehicleForm.addr">
              <el-option label="- 北京顺义机动车检测中心" value="20"></el-option>
              <el-option label="- 北京昌平机动车检测中心" value="21"></el-option>
              <el-option label="- 北京海淀机动车检测中心" value="22"></el-option>
              <el-option label="- 北京朝阳机动车检测中心" value="23"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="年检费用">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.fee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年检证书">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.code"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="送检时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="saveVehicleForm.inspectionTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效期">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="saveVehicleForm.expireDate"/>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修状态">
            <el-radio label="送检中" value="1" v-model="saveVehicleForm.status"></el-radio>
            <el-radio  label="已完成" value="0" v-model="saveVehicleForm.status"></el-radio>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveVehicle">确定</el-button>
    </template>
  </el-dialog>
</template>


<script setup>
import { ref,onMounted } from "vue";
import axios, {Axios} from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('录入年检车辆');
const vehicleArr=ref([]);
const searchVehicleForm =ref({license:'',name:'',status:''});

const  saveVehicleForm=ref({
  username:'',
  vehicleId:'',
  item:'',
  addr:'',
  fee:'',
  code:'',
  status:'',
  inspectionTime:'',
  expireDate:'',
  license:''
})

//加载车辆数据
const loadVehicle=()=>{
  let data=qs.stringify(searchVehicleForm.value);
  if (data===null&&data===''){
    data=null;
  }
  axios.get(BASE_URL+'/v1/vehicleInspection/select?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          vehicleArr.value=response.data.data;
          console.log(vehicleArr.value)
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
onMounted(()=>{
  loadVehicle();
})

const handleClose =()=>{
  if(confirm("确定吗")){
    dialogVisible.value=false;
    saveVehicleForm.value={};
  }
}
//重置车辆搜索信息
const resetSearch=()=>{
  searchVehicleForm.value={username:'',license:'',status:''};
  loadVehicle();
}
const vehicle=ref([]);
let user=getUser();
console.log(user.id);
//获取车牌号
const updeteForm =()=>{
  dialogVisible.value=true;
  axios.get(BASE_URL+'/v1/vehicleInspection/selectlicense')
      .then((response)=>{
        if (response.data.code==2000){
          vehicle.value=response.data.data;
        }else {
          ElMessage.error("请求数据异常")
        }

      })
}
//录入年检的车辆
const saveVehicle =()=>{
  saveVehicleForm.value.userId=user.id;
  let data =qs.stringify(saveVehicleForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/vehicleInspection/insert',data)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('操作成功');
          dialogVisible.value=false;
          saveVehicleForm.value={};
          loadVehicle();
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
const itemTypeFormatter=(row,column,cellValue,index)=>{
  if (cellValue==30){
    cellValue='违章检查';
  }else if (cellValue==31){
    cellValue='上线检测';
  }else if (cellValue==32){
    cellValue='尾气检测';
  }else if (cellValue==33){
    cellValue='外观检测';
  }
  return cellValue;
}
const vehicleStatusTypeFormatter=(row,column,cellValue,index)=>{
  if (cellValue==1){
    cellValue='年检中';
  }else if (cellValue==0){
    cellValue='已完成';
  }
  return cellValue;
}
const addrFormatter=(row,column,cellValue,index)=>{
  if (cellValue==20){
    cellValue='北京顺义机动车检测中心';
  }else if (cellValue==21){
    cellValue='北京昌平机动车检测中心';
  }else if (cellValue==22){
    cellValue='北京海淀机动车检测中心';
  }else if (cellValue==23){
    cellValue='北京朝阳机动车检测中心';
  }
  return cellValue;
}
//编辑车辆
const editVehicle=(id)=>{
  updeteForm();
  dialogVisible.value=true
  dialogTitle.value='编辑车辆';
  axios.get(BASE_URL+'/v1/vehicleInspection/select?id='+id)
      .then((response)=>{
        if (response.data.code==2000){
          console.log(response.data.data[0]);
          saveVehicleForm.value=response.data.data[0];
        }else {
          ElMessage.error(response.data.msg);
        }
      })

}
//删除车辆
const delVehicle=(id,index)=>{
  if (confirm("确定删除吗")){
    axios.delete(BASE_URL+'/v1/vehicleInspection/delete/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success('删除成功');
            vehicleArr.value.splice(index,1);
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }
}
</script>


<style scoped>

</style>